<template>
  <!--  <div class="homeBox">-->
  <!--    <img src="../../assets/image/homeBg.png" alt="">-->
  <!--  </div>-->


  <div class="container">
    <img class="back" src="../../assets/imgs/back.png" alt="">
    <div class="header">
      <!--      <img class="showIcon left" src="../../assets/imgs/total.png" alt="">-->
      <div class="showIcon1 right">
        <img src="../../assets/image/hot.png" style="" alt="" class="image">
        <span>Hot:</span>
        <span> {{ userData.loginCount }}</span>
      </div>

      <div class="showIcon right">
        <img src="../../assets/image/shandian.png" alt="">: <span> {{ userData.electric }}</span>
      </div>

      <span class="count" id="score"></span>
      <span class="count" id="power"></span>
    </div>
    <img class="title" src="../../assets/imgs/title.png" alt="">
    <img class="btn step step0" src="../../assets/imgs/step1.png" alt="1" @click="clickBox">
    <img class="btn step step1" src="../../assets/imgs/step3.png" alt="3" @click="clickBox">
    <img class="btn step step2" src="../../assets/imgs/step2.png" alt="2" @click="clickBox">
    <img class="btn step step3" src="../../assets/imgs/xinmubiao.png" alt="4" @click="clickBox">
    <img class="btn step step4" src="../../assets/imgs/step0.png" alt="0" @click="clickBox">
    <div class="btn car" ref="car">
      <img src="../../assets/imgs/car.png" alt="car">
    </div>
    <audio src="../../assets/car.wav" v-show="false" ref="carWhistle" muted></audio>
    <!--    <clickaudio ref="clickAudioComponent"></clickaudio>-->
    <van-dialog class="prizeResultModal" v-model="uploaSuccdShow" style="background-color: transparent;margin-top: 40px"
                :overlay="overlayFlag">
      <img style="width: 100%" src="@/assets/image/jinli_dialog.png">
      <div class="close_icon" style="margin-top: 10px;text-align: center" @click="dialogClos">
        <!--        <van-icon size="1rem" name="close" />-->
        <img src="../../assets/image/returnGo.png">
      </div>
    </van-dialog>
  </div>

</template>

<script>
import {getUserUrl} from "@/api/login";
import {Toast} from "vant";
import {activitytime, myConstants} from "@/utils/activitytime";
// import VConsole from 'vconsole';
// const vConsole = new VConsole({theme: 'dark'});
export default {
  name: "index",
  components: {},

  data() {
    return {
      overlayFlag: false,
      userData: {},
      currenTime: new Date().getTime(),
      uploaSuccdShow: false,
      _this: '',
      activity_not_start: "活动暂未开启",
      activity_end: "活动已结束",
    };
  }, created() {
    this._this = this;
    // document.getElementById("audioId").play();
  },
  mounted() {
    document.getElementById("bgAudioBox").style.display = "block";
    let isLogin = localStorage.getItem("isLogin");
    let now = new Date().getTime();
    if (isLogin === 'true' && now > this.getRealTime(activitytime.jinli)) {
      this.uploaSuccdShow = true;
      localStorage.setItem("isLogin", "false");
    }
    this.$store.commit("changeaudioUrl", "0");
    this.getUser();
    // this.$nextTick(() => {
    //   console.log("点击了按钮...")
    //   const car = document.querySelector(".car");
    //   const power = document.querySelector("#power");
    //   const score = document.querySelector("#score");
    //   if (this.currenTime == new Date("2023-01-04").getTime()) {
    //     //  新伙伴
    //     car.className = "btn car status0 running gas";
    //   } else if (this.currenTime == new Date("2023-01-09").getTime()) {
    //     //  新氛围
    //     car.className = "btn car status1 running";
    //   } else if (this.currenTime == new Date("2023-01-12").getTime()) {
    //     //  新目标
    //     car.className = "btn car status2 running";
    //
    //   }
    //   this.timeRun();
    // });
    // if (localStorage.getItem("uploaSuccdShow")) {
    //   this.$nextTick(() => {
    //     this.uploaSuccdShow = false;
    //   });
    // } else {
    //   this.uploaSuccdShow = true;
    //   localStorage.setItem("uploaSuccdShow", true);
    // }
  },
  methods: {
    dialogClos() {
      this.uploaSuccdShow = false;
    },
    timeRun() {
      setTimeout(() => {
        //this.$refs.carWhistle.play();
        let classNames = this.$refs.car.className;
        classNames = classNames + " gas";
        this.$refs.car.className = classNames;
      }, 1000);
    },
    whistle(type) {
      let audioEle = this.$refs.carWhistle;
      audioEle.muted = false;
      audioEle.pause();
      setTimeout(() => {
        console.log(this.$refs.carWhistle);
        audioEle.play();
        let classNames = this.$refs.car.className;
        classNames = classNames + " gas";
        this.$refs.car.className = classNames;
      }, 1000);
      setTimeout(() => {
        // if (type == 3) {
        //   let startTime = new Date(activitytime.start_xiaota).getTime();
        //   if (new Date().getTime() < startTime) {
        //     Toast(this.activity_not_start);
        //   } else {
        //     this.$store.commit("changeaudioUrl", type);
        //     this.$router.push({path: "/activityFlow", query: {type: type}});
        //   }
        // } else if (type == 2) {
        //   //新氛围
        //   let startTime = new Date("2023-01-09").getTime();
        //   if (this.currenTime <= startTime) {
        //     Toast("活动暂未开启");
        //
        //   } else if (endTime <= this.currenTime) {
        //     Toast("活动已结束");
        //
        //   } else {
        //     this.$router.push({path: "/activityFlow", query: {type: type}});
        //   }
        // } else if (type == 4) {
        //   //新氛围
        //   let startTime = new Date("2023-01-12").getTime();
        //   let endTime = new Date("2023-01-12").getTime();
        //   if (this.currenTime <= startTime) {
        //     Toast("活动暂未开启");
        //
        //   } else if (endTime <= this.currenTime) {
        //     Toast("活动已结束");
        //   } else {
        //     this.$router.push({path: "/activityFlow", query: {type: type}});
        //   }
        // } else if (type == 5) {
        //   //抽奖
        //   let startTime = new Date("2023-01-03").getTime();
        //   // let endTime = new Date("2023-01-12").getTime();
        //   if (this.currenTime <= startTime) {
        //     Toast(_this.activity_not_start);
        //   } else {
        //     this.$router.push({path: "/activityFlow", query: {type: type}});
        //   }
        // }
        this.$store.commit("changeaudioUrl", type);
        this.$router.push({path: "/activityFlow", query: {type: type}});
      }, 2000);
    },
    clickBox(e) {
      let _this = this;

      this.clickAudio();
      setTimeout(function () {
        const car = document.querySelector(".car");
        const power = document.querySelector("#power");
        const score = document.querySelector("#score");
        const now = new Date().getTime();
        console.log("当前时间:" + now);
        const action = (step) => {
          switch (step) {
            case 1:
              if (now < _this.getRealTime(activitytime.ezhi)) {
                Toast(_this.activity_not_start);
                return;
              }
              if (now > _this.getRealTime(activitytime.lotteryEndTime)) {
                Toast(_this.activity_end);
                return;
              }
              car.className = "btn car status3 running";
              _this.whistle("5");
              break;
            case 2:
              if (now < _this.getRealTime(activitytime.newyear)) {
                Toast("活动暂未开启");
              } else {
                _this.$store.commit("changeaudioUrl", "1");
                _this.$router.push({path: "/activityFlow", query: {type: "1"}});
              }
              break;
            case 3:
              console.log("新氛围开启时间:" + now < _this.getRealTime(activitytime.xinfenwei))
              // 执行代码
              if (now < _this.getRealTime(activitytime.xinfenwei)) {
                Toast(_this.activity_not_start);
                return;
              }
              car.className = "btn car status1 running";
              _this.whistle("2");
              break;
            case 4:
              if (now < _this.getRealTime(activitytime.start_xiaota)) {
                Toast(_this.activity_not_start);
                return;
              }
              car.className = "btn car status0 running";
              _this.whistle("3");
              break;
            case 5:
              if (now < _this.getRealTime(activitytime.xinmubiao)) {
                Toast(_this.activity_not_start);
                return;
              }
              car.className = "btn car status2 running";
              _this.whistle("4");
              break;
              // ...
          }
        };
        let powerValue = 100;
        let scoreValue = 0;
        let target = e.target;
        let scoreCount = score.innerHTML ? +score.innerHTML : scoreValue;
        let powerCount = power.innerHTML ? +power.innerHTML : powerValue;
        if (target.className.includes("step")) {
          let type = Number(target.alt) + 1;
          action(type);
        }
      }, myConstants.delay);

    },
    getRealTime(time) {
      let realTime = time.replace(/-/g, '/')
      return new Date(realTime).getTime();
    },
    getUser() {
      getUserUrl().then(res => {
        this.userData = res.data;
        localStorage.setItem("username", this.userData.username);
        console.log(this.userData);
      });
    }
  }
};
</script>

<style scoped lang="scss">
body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.back {
  width: 100%;
  position: absolute;
}

.title {
  position: absolute;
  width: 80%;
  margin: 0 10%;
  top: 12vw;
  animation: Updown 1s infinite alternate;
}

.header {
  position: absolute;
  width: 94vw;
  margin: 0 3vw;
  top: 2vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.header1 {
  position: absolute;
  width: 94vw;
  margin: 0 3vw;
  top: 10vw;
  display: flex;
  justify-content: flex-end;
}

.showIcon1 {
  position: relative;
  height: 25px;
  //background-image: url("../../assets/imgs/total.png");
  line-height: 25px;
  padding: 0 15px 0 28px;
  font-size: 15px;
  font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
  font-weight: 400;
  color: #181818;
  background: #FFFFFF;
  box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.16);
  border-radius: 13px 13px 13px 13px;
  opacity: 0.5;

  .image {
    position: absolute;
    top: 2px;
    left: 8px;
    width: 18px;
    height: 18px;
  }
}

.showIcon {
  width: 78px;
  height: 25px;
  line-height: 25px;
  font-size: 15px;
  font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
  font-weight: 400;
  color: #181818;
  background: #FFFFFF;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  border-radius: 13px 13px 13px 13px;
  opacity: 0.5;

  img {
    height: 100%;
    vertical-align: middle;
  }

}

.count {
  position: absolute;
  margin-top: -1vw;
  font-size: 3vw;
}

#score {
  left: 21vw;
}

#power {
  right: 6vw;

}

.btn {
  position: absolute;
  width: 37vw;
}

.step0 {
  left: 4vw;
  top: 117vw;
}

.step1 {
  right: 4vw;
  top: 147vw;
}

.step2 {
  left: 4vw;
  top: 217vw;
}

.step3 {
  right: 4vw;
  top: 290vw;
}

.step4 {
  left: 4vw;
  top: 340vw;
}

.car {
  display: none;

  img {
    width: 100%;
  }
}

.gas::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 4px;
  width: 15px;
  height: 14px;
  background-image: url("../../assets/image/gas.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.car.status0 {
  width: 11.7vw;
  top: 111vw;
  left: 48vw;
  display: block;
}

.car.status0.running {
  animation: status0Track 1.5s 1 alternate;
  animation-fill-mode: forwards;
  position: relative;
}

.car.status1 {
  width: 11.7vw;
  top: 155vw;
  left: 44vw;
  transform: rotateY(180deg);
  display: block;
}

.car.status1.running {
  animation: status1Track 1.5s 1 alternate;
  animation-fill-mode: forwards;
  position: relative;
}

.car.status2 {
  width: 11.7vw;
  top: 205vw;
  left: 86vw;
  display: block;
}

.car.status2.running {
  animation: status2Track 1.5s cubic-bezier(0.36, 0, 0.64, 1) 1 alternate;
  animation-fill-mode: forwards;
  position: relative;
}

.car.status3 {
  width: 11.7vw;
  top: 285vw;
  left: 45vw;
  transform: rotateY(180deg);
  display: block;
}

.car.status3.running {
  animation: status3Track 1.5s 1 alternate;
  animation-fill-mode: forwards;
  position: relative;
}

@keyframes Updown {
  from {
    margin-top: 30px;
  }

  to {
    margin-top: 10px;
  }
}

@keyframes status0Track {
  from {
    top: 108vw;
    left: 44vw;
  }
  to {
    top: 114vw;
    left: 51vw;
  }
}

@keyframes status1Track {
  from {
    top: 150vw;
    left: 50vw;
  }
  to {
    top: 162vw;
    left: 36vw;
  }
}

@keyframes status2Track {
  0% {
    top: 199vw;
    left: 60vw;
    transform: rotate(-20deg);
  }
  50% {
    top: 206vw;
    left: 74vw;
    transform: rotate(10deg);
  }
  100% {
    top: 220vw;
    left: 78vw;
    transform: rotate(45deg);
  }
}

@keyframes status3Track {
  from {
    top: 281vw;
    left: 50vw;
  }
  to {
    top: 292vw;
    left: 36vw;
  }
}

@keyframes animX {
  0% {
    left: 0px;
  }
  100% {
    left: 500px;
  }
}

@keyframes animY {
  0% {
    top: 0px;
  }
  100% {
    top: 500px;
  }
}

.close_icon {
  color: #f9f9f9;

  img {
    width: 56px;
    height: 56px;
  }
}
</style>
